import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";

type Props = {
  role: string;
  content: string;
};

export function ChatMessageView({ role, content }: Props) {
  const isUser = role === "user";
  return (
    <div className={isUser ? "text-right" : "text-left"}>
      <div
        className={
          "inline-block px-3 py-2 rounded max-w-full break-words whitespace-pre-wrap " +
          (isUser ? "bg-blue-600 text-white" : "bg-white border text-gray-900")
        }
      >
        {isUser ? (
          content
        ) : (
          <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>
            {content}
          </ReactMarkdown>
        )}
      </div>
    </div>
  );
}
